<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue demo</title>
  <style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }
  </style>
</head>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<body>
  
  <div id="appRooter">
    <h1>Hello App!</h1>
    <p>
      <!--使用 router-link 组件进行导航 -->
      <!--通过传递 `to` 来指定链接 -->
      <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
      <router-link to="/">Go to Home</router-link>
      <router-link to="/about">Go to About</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>


  <h1>Vue init</h1>
  <h2>声明式渲染</h2>
  <h3>文本插值，形如<code>{{ xxx }}}</code></h3>
  <div id="app">{{message}}</div>
  <h3>指令,形如<code>v-*</code></h3>
  <div id="app-2">
    <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
  </div>
  <h2>条件与循环</h2>
  <div id="app-3">
    <p v-if='seen'>现在你看到我了</p>
  </div>
  <strong>拓展，页面过度效果</strong>
  <div id="demo">
    <button v-on:click="show = !show">Toggle</button>
    <transition name='fade'>
      <p v-if="show">hello</p>
    </transition>
  </div>

  <div id="app-4">
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>
  <h2>处理用户输入</h2>
  <p>
    <code>v-on</code>
    <code>v-model</code>
  </p>
  <script src="./js/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'hello vue'
      }
    })
    var app2 = new Vue({
      el: '#app-2',
      data: {
        message: '页面加载于' + new Date().toLocaleString()
      }
    })
    // 控制台输入 app2.message = 'new message'

    var app3 = new Vue({
      el: '#app-3',
      data: {
        seen: true
      }
    })
    // 控制台输入 app3.seen = false

    // 拓展-组件消失过渡
    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })
    var app4 = new Vue({
      el: '#app-4',
      data: {
        todos: [
          { text: '学习 JavaScript' },
          { text: '学习 Vue' },
          { text: '整个牛项目' }
        ]
      }
    })

    const Home = { template: '<div>Home</div>' }
    const About = { template: '<div>About</div>' }

    // 2. 定义一些路由
    // 每个路由都需要映射到一个组件。
    // 我们后面再讨论嵌套路由。
    const routes = [
      { path: '/', component: Home },
      { path: '/about', component: About },
    ]

    // 3. 创建路由实例并传递 `routes` 配置
    // 你可以在这里输入更多的配置，但我们在这里
    // 暂时保持简单
    const router = VueRouter.createRouter({
      // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
      history: VueRouter.createWebHashHistory(),
      routes, // `routes: routes` 的缩写
    })

    // 5. 创建并挂载根实例
    const app = Vue.createApp({})
    //确保 _use_ 路由实例使
    //整个应用支持路由。
    app.use(router)

    app.mount('#appRooter')
    // 控制台输入 app4.todos.push({text: '新项目'})
  </script>
</body>
</html>